<template>
  <div class="property-index">
    <component :is="comp" :data="data"></component>
  </div>
</template>

<script lang="ts">
import { defineComponent, markRaw, onMounted, ref } from 'vue';
import { Emitter } from '@/ui-kit/index';
import { Msg } from '../msg';
import { AssetType, IAssetInfo } from '../store/types';
import PropertyScene from './scene.vue';
import PropertyNode from './node.vue';
import { sceneAssistant } from '../scene';

export default defineComponent({
  name: 'property-index',
  props: {},
  setup(props, { emit }) {
    const comp = ref();
    const data = ref();

    function reset() {
      comp.value = null;
      data.value = '';
    }

    function showAssetProperty(asset: IAssetInfo | null) {
      if (asset) {
        if (asset.type === AssetType.Scene) {
          comp.value = markRaw(PropertyScene);
          data.value = asset.id;
        } else if (asset.type === AssetType.Event) {

        }
      } else {
        reset();
      }
    }

    function resetScene(id: string) {
      const sceneAssetID = data.value;
      if (sceneAssetID === id) {
        reset();
      }
    }

    onMounted(() => {
      Emitter.on(Msg.ShowAssetProperty, (asset: IAssetInfo | null) => {
        showAssetProperty(asset);
      });
      Emitter.on(Msg.ShowNodeProperty, (node: cc.Node) => {
        if (node) {
          comp.value = markRaw(PropertyNode);
          data.value = '';
        } else {
          // 显示当前的scene
          if (sceneAssistant.asset) {
            showAssetProperty(sceneAssistant.asset);
          } else {
            reset();
          }
        }
      });
      Emitter.on(Msg.CloseAsset, (id: string) => {
        resetScene(id);
      });
      Emitter.on(Msg.RemoveSceneAsset, (data: IAssetInfo) => {
        resetScene(data.id);
      });
    });

    return {
      comp, data,
    };
  },
});

</script>

<style scoped lang="scss">
.property-index {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
}
</style>